<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>覆盖物-circle的添加与移除</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.14&key=b3d347ea63d8ac4e07bc3915f0123669"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
        
        label {
            width: 55px;
            height: 26px;
            line-height: 26px;
            margin-bottom: 0;
        }
        button.btn {
            width: 80px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width:24rem;">
    <h4>添加、删除覆盖物</h4>
    <div class="input-item">
      <label>Circle：</label>
      <button class="btn" id="add-circle" style="margin-right:1rem;">添加Circle</button>
      <button class="btn" id="remove-circle">删除Circle</button>
      <button class="btn" id="reset-circle">重置Circle</button>
    </div>
  </div>

  <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=3c5ca12a5778fde874e9959c7fbdf516">//引入高德地图API</script> 
  <script language="javascript">
  var mapObj;
  var scale;
  var mapType;
  var toolBar;
  var overView;
  var circleEditor;
  var circle;
  var polygonEditor;
  var polygon;
  var homeControl;
  var controlUI;
  var ruler;
  var mousetool;
  //刷新页面
  function reload(){
      location.reload();
  }
  
  function mapInit(){
   mapObj = new AMap.Map("iCenter",{
          center:new AMap.LngLat(116.397728,39.90423), //地图中心点
          level:13, //地图显示的比例尺级别
      });
      mapObj.plugin(["AMap.ToolBar"],function(){ //在地图中添加ToolBar插件
   toolBar = new AMap.ToolBar();
   mapObj.addControl(toolBar);
   });
   mapObj.plugin(["AMap.Scale"],function(){ //加载比例尺插件
   scale = new AMap.Scale();
   mapObj.addControl(scale);
          scale.show();
   });
      mapObj.plugin(["AMap.OverView"],function(){ //在地图中添加鹰眼插件
   //加载鹰眼
   overView = new AMap.OverView({
   visible:true //初始化显示鹰眼
   });
   mapObj.addControl(overView);
          overView.open(); //展开鹰眼
   });
      mapObj.plugin(["AMap.RangingTool"],function(){ 
          ruler = new AMap.RangingTool(mapObj); 
          AMap.event.addListener(ruler,"end",function(e){ 
   ruler.turnOff(); 
   }); 		
      }); 
      mapObj.plugin(["AMap.MouseTool"],function(){ 	 //鼠标工具插件
          mousetool = new AMap.MouseTool(mapObj); 		 
      });
  }
  function Coordinate(){
      AMap.event.addListener(mapObj,'click',getLnglat); //点击事件
  }
  
  
  function toolBarShow(){
      toolBar.show();
      toolBar.showRuler();
      toolBar.showDirection();
  }
  function toolBarDirection(){
      toolBar.show();
      toolBar.showDirection();
      toolBar.hideRuler();
  }
  function toolBarLong(){
      toolBar.show();
      toolBar.hideDirection();
      toolBar.showRuler();
  }
  function toolBarShot(){
      toolBar.show();
      toolBar.hideRuler();
      toolBar.hideDirection();
  }
  function iMapType(){
      mapObj.plugin(["AMap.MapType"],function(){ //添加地图类型切换插件
   //地图类型切换
   mapType= new AMap.MapType({defaultType:1,showRoad:true});
   mapObj.addControl(mapType);
   });
  }
  function removeMapType(){
      mapObj.removeControl(mapType);
  }
  function iCircleEditor(){ //圆形编辑器
      circle = new AMap.Circle({ //圆形编辑器的样式
          map: mapObj,
          center:new AMap.LngLat("116.40332221984863","39.90025505675715"),
          radius:1000,
          strokeColor: "#F33",
          strokeOpacity: 1,
          strokeWeight: 3,
          fillColor: "ee2200",
          fillOpacity: 0.35
      });
      mapObj.plugin(["AMap.CircleEditor"],function(){
          circleEditor = new AMap.CircleEditor(mapObj,circle); //创建圆形编辑器对象
          circleEditor.open(); //打开圆形编辑器
      });
  }
  function removeCicleEditor(){ //关闭圆形编辑器，隐藏圆形
      circleEditor.close();
      circle.hide();
  }
  
  function iPloygonEditor(){ //编辑多边形
   var arr=new Array();//经纬度坐标数组
   arr.push(new AMap.LngLat("116.403322","39.920255"));
   arr.push(new AMap.LngLat("116.410703","39.897555"));
   arr.push(new AMap.LngLat("116.402292","39.892353"));
   arr.push(new AMap.LngLat("116.389846","39.891365"));
   polygon = new AMap.Polygon({
   path:arr, //设置多边形轮廓的节点数组
   strokeColor:"#0000ff",
   strokeOpacity:0.2,
   strokeWeight:3,
   fillColor: "#f5deb3",
   fillOpacity: 0.35
   });
   //地图上添加多边形
   mapObj.addOverlays(polygon);
   //构造多边形编辑对象，并开启多边形的编辑状态
   mapObj.plugin(["AMap.PolyEditor"],function(){
   polygonEditor = new AMap.PolyEditor(mapObj,polygon);
   polygonEditor.open();
   });
  }
  function removePloygonEditor(){
      polygonEditor.close();
      polygon.hide();
  }
  AMap.homeControlDiv = function(){}
  AMap.homeControlDiv.prototype = {
   addTo: function(map, dom){
   dom.appendChild(this._getHtmlDom(map));
   },
   _getHtmlDom:function(map){
   this.map=map;
   // 创建一个能承载控件的<div>容器
   controlUI = document.createElement("DIV");
   controlUI.style.width='80px'; //设置控件容器的宽度
   controlUI.style.height='20px'; //设置控件容器的高度
   controlUI.style.backgroundColor='white';
   controlUI.style.borderStyle='solid';
   controlUI.style.borderWidth='2px';
   controlUI.style.cursor='pointer';
   controlUI.style.textAlign='center';
  
   // 设置控件的位置
   controlUI.style.position='absolute';
   controlUI.style.left='120px'; //设置控件离地图的左边界的偏移量
   controlUI.style.top='5px'; //设置控件离地图上边界的偏移量
   controlUI.style.zIndex='300'; //设置控件在地图上显示
  
   // 设置控件字体样式
   controlUI.style.fontFamily='Arial,sens-serif';
   controlUI.style.fontSize='12px';
   controlUI.style.paddingLeft='4px';
   controlUI.style.paddingRight='4px';
   controlUI.innerHTML="换中心点";
  
   // 设置控件响应点击onclick事件
   controlUI.onclick = function(){
   map.setCenter(new AMap.LngLat(116.234404, 39.12915));
   }
   return controlUI;
   }
  }
  AMap.event.trigger(homeControlDiv,"hide");
  AMap.event.addListener(homeControlDiv,"hide",function(){
      controlUI.style.display = 'none';
  })
  
  function myControl(){
      homeControl = new AMap.homeControlDiv(mapObj); //新建自定义插件对象
      mapObj.addControl(homeControl); //地图上添加插件
  }
  function removeMyControl(){
      homeControl.hide();
      //controlUI.style.display='none';
  }
  function iRangingTool(){
      ruler.turnOn();
  }
  function removeRangingTool(){
      ruler.turnOff();
      mapObj.clearMap();
      //ruler.hide();
      //ruler.setMap(null);	
      //mapObj.removeControl(ruler);
  }
  function iMarker(){
      mousetool.marker(); //使用鼠标工具，在地图上画标记点
  }
  function iMeasureArea(){
      mousetool.measureArea();
  }
  function iRectZoomIn(){
      mousetool.rectZoomIn();
  }
  function iRectZoomOut(){
      mousetool.rectZoomOut();
  }
  function iPolyline(){
      mousetool.polyline();
  }
  function iPolygon(){
      mousetool.polygon();
  }
  function iCircle(){
      mousetool.circle();
  }
  function iRectangle(){
      mousetool.rectangle();
  }
  function iRule(){
      mousetool.rule();
  }
  function removeMouseTool(){
      mousetool.close(true);
  }
  
  function geocoder() {
   var MGeocoder;
   //加载地理编码插件
   mapObj.plugin(["AMap.Geocoder"], function() { 
   MGeocoder = new AMap.Geocoder({ 
   radius: 1000,
   extensions: "all"
   });
   //返回地理编码结果 
   AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack); 
   //逆地理编码
   MGeocoder.getAddress(lnglatXY); 
   });
   //加点
   var marker = new AMap.Marker({
   map:mapObj,
   icon: new AMap.Icon({
   image: "http://api.amap.com/Public/images/js/mark.png",
   size:new AMap.Size(58,30),
   imageOffset: new AMap.Pixel(-32, -0)
   }),
   position: lnglatXY,
   offset: new AMap.Pixel(-5,-30)
   });
   // mapObj.setFitView();
  }
  //回调函数
  function geocoder_CallBack(data) {
   var address;
   //返回地址描述
   address = data.regeocode.formattedAddress;
   //返回结果拼接输出
   document.getElementById("iAddress").innerHTML = address;
  } 
  //鼠标点击，获取经纬度坐标 
  function getLnglat(e){ 
      mapObj.clearMap();
      var x = e.lnglat.getLng();
      var y = e.lnglat.getLat(); 
      document.getElementById("lnglat").innerHTML = x + "," + y;
      
      lnglatXY = new AMap.LngLat(x,y);
      geocoder();
  }
  </script>
</body>
</html>
